import Person from '@mdi/svg/svg/account.svg';
import { Tab } from '../imports';

export function TabPage() {
	return (
		<>
			<h2>标签页</h2>
			<p>样式1：</p>
			<Tab
				tabs={['第一页', { icon: Person, text: '第二页' }, '第三页', { icon: Person, text: '第四页', disabled: true }]}
			>
				<div>第一页</div>
				<div>第二页</div>
				<div>第三页</div>
			</Tab>
			<p>样式2：</p>
			<Tab
				appearance="outline"
				tabs={[
					'第一页',
					{ text: '第二页', closable: true },
					'第三页',
					'第四页',
					'第五页',
					{ text: '第六页', closable: true },
					'第七页',
					'第八页',
					'第九页',
					{ text: '第十页', disabled: true },
					'第十一页',
				]}
			>
				<div>第一页</div>
				<div>第二页</div>
				<div>第三页</div>
			</Tab>
			<p>样式3：</p>
			<Tab
				appearance="simple"
				tabs={[
					'第一页',
					{ text: '第二页', closable: true },
					'第三页',
					'第四页',
					'第五页',
					{ text: '第六页', closable: true },
					'第七页',
					'第八页',
					'第九页',
					{ text: '第十页', disabled: true },
					'第十一页',
				]}
			>
				<div>第一页</div>
				<div>第二页</div>
				<div>第三页</div>
			</Tab>
		</>
	);
}
